import React, { FC, useEffect, useState } from 'react'
import MyHead from '../../components/MyHead'
import BG from "@/assets//mine.gif"
import { App_userInfo, changeUserInfo } from '../../rtk/reducers/infoSilce'
import { useSelector } from 'react-redux';
import { Avatar, Button, List ,Dialog, Mask} from 'antd-mobile';
import { useCommonFunc } from '../../hooks/useCommon';
import { getInfoAPI } from '../../api/api';
import { useDispatch } from 'react-redux';
import { baseURL, imgUrl } from '../../api/request';
import { 
  PayCircleOutline,
  UnorderedListOutline, 
  BillOutline, 
  UnlockOutline, 
  CollectMoneyOutline,
  AudioOutline,
  ChatAddOutline,
  StopOutline,
  SetOutline,
 } from 'antd-mobile-icons';
import { useLocalData } from '../../hooks/useLocalData';
import MyDao from '../../components/MyDao';
import { ShowMessage } from '../../utils/message';
import { useLocalStorageState } from 'ahooks';

const Mine:FC = () => {
  const userInfo = useSelector(App_userInfo)
  const { gotopage } = useCommonFunc()
  const dispatch = useDispatch()
  const {
    setToken
  } = useLocalData()

  const getuserInfo = async () => {
    const res:any = await getInfoAPI()
    if(res.code == "200"){
      dispatch(changeUserInfo(res.user))
    }
  }
  const [visible, setVisible] = useState<boolean>(false)
  const [cache,setcache] = useLocalStorageState<any>(
    "AppCache",
    {
      defaultValue:0
    }
  )


  // 注销登录
  const todoLogout = () => {
      Dialog.show({
        content: '你真的要注销登录吗',
        closeOnAction: true,
        actions: [
          [
            {
              key: 'cancel',
              text: '取消',
            },
            {
              key: 'delete',
              text: '删除',
              bold: true,
              danger: true,
              onClick:async()=>{
                dispatch(changeUserInfo(null))
                setToken('')
              }
            },
          ],
        ],
      })
  }

  // 缓存清除
  const showMark = () => {
    if(cache!=0){
      setVisible(true)
    }else{
      ShowMessage("暂无缓存")
    }
  }

  useEffect(()=>{
    getuserInfo()
    setcache(cache+Math.floor(Math.random()*100))
    
  },[])

  return (
    <div className='mine'>
      <MyHead title='个人中心' noback={true}></MyHead>
      <div className="mine-top" style={{width:"100%",height:200, position:'relative'}}>
        <img src={BG} alt="" style={{width:"100%",height:200}}/>
        <div className='mine-top-box' style={{
          width:"100%", height:200, position:'absolute', top:0, left:0,
          display:'flex', justifyContent:"center", alignItems:"center"
        }}>
            {
              userInfo ? 
              <div className='infos' style={{flexDirection:"column", display:"flex", justifyContent:"center", alignItems:"center"}}>
                 <Avatar style={{ '--size': '72px', borderRadius: '50%' }} src={userInfo.avatar?  userInfo.avatar.replace(/public/,imgUrl) :''}
                />

                {/* <h3 className='mt10' style={{ color: "#fff", fontSize: 18, textAlign: "center" }}>{userInfo.userName}</h3> */}
                <h3 className='mt10' style={{ color: "#fff", fontSize: 16, textAlign: "center" }}>{userInfo.nickName}</h3>
                <h3 className='mt10' style={{ color: "#fff", fontSize: 16, textAlign: "center" }}>{userInfo.phonenumber}</h3>
              </div>
              :
              <Button onClick={()=>gotopage('/login')} color="success" size="large" className='tada1'>授权登录</Button>
            }
        </div>
      </div>

        <div className="list">
            <List>
                {
                  userInfo &&
                  <div>
                      <List.Item prefix={<UnorderedListOutline />} onClick={()=>gotopage('/myinfo')}>
                        个人信息
                      </List.Item>
                      <List.Item prefix={<PayCircleOutline />} onClick={() => {}}>
                        账单
                      </List.Item>
                      <List.Item prefix={<BillOutline />} onClick={() => {}}>
                        总资产
                      </List.Item>
                      <List.Item prefix={<UnlockOutline />} onClick={()=>gotopage('/changepass')}>
                        修改密码
                      </List.Item>
                      <List.Item prefix={<CollectMoneyOutline />} onClick={() => {}}>
                        访问记录
                      </List.Item>
                  </div>
                }
                      <List.Item prefix={<AudioOutline />} onClick={() => {}}>
                        通知公告
                      </List.Item>
                      <List.Item prefix={<ChatAddOutline />} onClick={() => {}}>
                        联系我们
                      </List.Item>
                      <List.Item prefix={<StopOutline />} extra={cache+"MB"} onClick={showMark}>
                        清除缓存
                      </List.Item>
                      <List.Item prefix={<SetOutline />} onClick={() => {}}>
                        设置
                      </List.Item>
              </List>

              {
                userInfo ? 
                <div className='btnbox' style={{ height:200, margin:20}}>
                  <Button block onClick={todoLogout}>注销登陆</Button>
                </div>
                :
                null
              }
        </div>

        <Mask visible={visible}>
              <div className='mask-box' style={{width:'100%',height:'100%',position:'relative',display:'flex',justifyContent:'center',alignItems:'center'}}>
                  <MyDao
                  flag={true}
                  style={{
                      position:"relative",
                      top:0,
                      right:0,
                  }}
                  size={120}
                  text="正在清除中…"
                  total={Math.ceil(cache/100)}
                  onEnd={()=>{
                    setVisible(false)
                    setcache(0)
                    ShowMessage("缓存清除成功")
                  }}
                  />
              </div>
        </Mask>
    </div>
  )
}

export default Mine